<template>
    <div class="service-item">
        <div class="inner">
            <div class="top-box">
                <div class="title">
                    <span class="icon vip-color">&#xe60c;</span>
                    <span class="name">{{name}}</span>
                </div>
                <div class="btn-box">
                    <div class="change-btn" @click="onClickChange">{{ type === 'gift' ? '赠送项目' : '调整项目'}}</div>
                </div>
            </div>
            
            <div class="feature-box">
                <block @click.stop="toSpecDetail(featureItem,bindex,value)" v-for="(featureItem, bindex) in value" :key="bindex">
                    <!-- @click.stop="toNewSpecDetail(featureItem,bindex,value)"  服务内容跳转详情 -->
                    <div class="feature grey-text-color" v-if="featureItem.number > 0" @click.stop="toNewSpecDetail(featureItem,bindex,value)">
                        <div class="left">
                            {{featureItem.value}}*{{featureItem.number}}
                        </div>
                        <div class="right">
                            ¥{{featureItem.price}}/件
                        </div>
                    </div>
                </block>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'ServiceItem',
})
export default class ServiceItem extends Vue {
    @Prop({
        type: String,
        default: 'product',
    })
    public type: any;

    @Prop({
        type: String,
    })
    public name: any;

    @Prop({
        type: Array,
        default() {
            return [];
        },
    })
    public value: any;

    public toSpecDetail(a,b,c) {
        // api.navigateTo({
        //     url: '/pages/spec_detail/main',
        //     query: {
        //         pkg_id: this.id,
        //         spec_index: this.specIndex,
        //         val_index: index,
        //     },
        // });
        // api.push({
        //     name: ROUTE_NAME.MALL_SPEC_DETAIL,
        //     query: {
        //         pkgId: this.id,
        //         specIndex: this.specIndex,
        //         valIndex: index,
        //     },
        // });
    }
    public toNewSpecDetail(_item){
        const shopDetailId = String(_item.detail_id);
        api.push({
            name: ROUTE_NAME.MALL_PRODUCT_DETAIL, //PKG_REVISION, //ROUTE_NAME.PKG_DETAIL
            query: {
                productId: shopDetailId,
            },
        });
    }

    public onClickChange() {
        this.$emit('change');
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.service-item {
    padding: 0 40rpx;
    border-bottom: 2rpx solid rgba(187, 187, 187, 0.27);
    .inner {
        .top-box {
            padding-top: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                .name {
                    margin-left: 24rpx;
                }
            }
            .btn-box {
                .change-btn {
                    width: 78px;
                    height: 24px;
                    line-height: 24px;
                    font-size: 14px;
                    color: #ffffff;
                    background-color: #FBC856;
                    text-align: center;
                    &:active {
                        background-color: darken(#FBC856, 10%);
                    }
                }
            }
        }

        .feature-box {
            padding: 7px 26px;
            .feature {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 7px 0;
                .left {
                    width: 400rpx;
                }
                .right {
                    width: 160rpx;
                }
            }
        }
    }
}

</style>
